<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>分页测试</title>
<link rel="stylesheet" href="/css/yz.page.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
	<h1>同个页面多分页情况，使用post异步请求</h1>
	<hr />
	<h2>分页表格1</h2>
	<table class="table" id="table1">
		<thead>
			<tr>
				<th class="w15">id</th>
				<th class="w15">姓名</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each="item: ${pageVo.resultList}">
				<td th:text="${item.id}">id</td>
				<td th:text="${item.name}">姓名</td>
			</tr>
		</tbody>
	</table>

	<div class="yz-page-tool" id="pageTool1"
		th:attr="total_num=${pageVo.totalNum},page_size=${pageVo.pageSize},page_no=${pageVo.pageNo}"></div>
	<hr style="margin-top: 50px" />
	<h2>分页表格2</h2>
	<table class="table" id="table2">
		<thead>
			<tr>
				<th class="w15">id</th>
				<th class="w15">姓名</th>
			</tr>
		</thead>
		<tbody>
			<tr th:each="item: ${pageVo.resultList}">
				<td th:text="${item.id}">id</td>
				<td th:text="${item.name}">姓名</td>
			</tr>
		</tbody>
	</table>
	<!-- 分页容器 -->
	<div class="yz-page-tool" id="pageTool2"
		th:attr="total_num=${pageVo.totalNum},page_size=${pageVo.pageSize},page_no=${pageVo.pageNo}"></div>
</body>
<script type="text/javascript" src="/js/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="/js/yz.page.js"></script>
<!-- 引入分页js，注意一定 要写在jquery后面 -->
<script type="text/javascript">
	// 加载方式一，自己处理数据
	initPageTool({
		ctrlId : "pageTool1",
		postUrl : "/index3",
		callBack : function(data) {
			// 自己的数据处理逻辑，可以如我这样写，也可以加载模板等
			let innerHtml = "<tr>"
			$(data.resultList).each(function(index, element) {
				innerHtml += "<tr>"
				innerHtml += "<td>" + element['id'] + "</td>";
				innerHtml += "<td>" + element['name'] + "</td>";
				innerHtml += "</tr>"
			});
			$("#table1").find("tbody").html(innerHtml);
		}
	});
	// 加载方式二，写死的加载（适用展示数据无需跳转，加样式及其他处理），如果有callBack则callTable和columns不生效
	initPageTool({
		ctrlId : "pageTool2", // 控件ID
		postUrl : "/index3", // 请求地址
		postData : {}, // 参数
		callTable : "table2", // 需要渲染的tableId
		columns : [ "id", "name" ]
	// 渲染列
	});
</script>

</html>